import { DirectiveBinding } from 'vue'
import { debounce } from '@/utils'

// 封装trim逻辑为一个独立的函数，增强代码的可维护性和可复用性
const applyTrim = (input) => {
  input.target.value = input.target.value.trim()
}

// 使用防抖函数来减少高频输入下的性能损耗
const debouncedTrim = debounce(applyTrim, 300)

const trimDirective = {
  mounted (el, binding) {
    const input = el.querySelector('input')

    // 检查input元素的存在性
    if (!input) {
      // console.warn('v-trim directive: No input element found.')
      return
    }

    // 添加事件监听器
    input.addEventListener('input', debouncedTrim)

    // 在unmounted钩子中移除事件监听器
    // 增加对 onUnmounted 方法的存在性检查
    if (binding.instance && typeof binding.instance.onUnmounted === 'function') {
      binding.instance.onUnmounted(() => {
        input.removeEventListener('input', debouncedTrim)
      })
    }
  }
}

export default trimDirective
